<template>
  <div class="content" style="height: 99%;">
    <div class="second-menu">
      <ul class="second-ul">
        <li
          v-for="(name,index) in menuName"
          :key="name"
          @click="changeType(index)"
          :class="{true:'active'}[menuIndex===index]"
        >{{name}}</li>
      </ul>
    </div>
    <!--section1-->
    <div
      class="section section1 clearfix"
      v-if="menuIndex===0"
      v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.5)"
    >
    <div class="bottom-ope clearfix">
        <div class="left-btn">
          <!-- <el-checkbox v-model="allChecked" class="checkBox" style="margin:0 20px;color:#77a6fe!important; ">全选</el-checkbox> -->
          <button class="btn btn-tjcp" @click="addCp()">添加菜品</button>
          <button class="btn btn-cpdr" @click='importCp()'>菜品导入</button>
          <button class="btn btn-sc" @click="deleteCp()">删除</button>
        </div>
        <ul
          class="paging"
          style="position: absolute;right: 20px;top: 50%;transform: translateY(-14px);"
        >
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage"
            background
            :page-size="rows"
            :page-sizes="[10, 15, 20, 25]"
            layout="sizes,total,prev, pager, next, jumper"
            :total="total"
          ></el-pagination>
        </ul>
      </div>

   
      <waterfall
        class="cuisine"
        :line-gap="280"
        :watch="cuisineList"
        style="overflow: scroll;height:85%;">
        <waterfall-slot
          class="cuisine-box"
          v-for="(item,index) in cuisineList"
          :key="index"
          :width="250"
          :height="270"
          :order="index"
        >
          <div class="cuisine-item" @click='handleChooseCuiItem(index,item.id)' :class="{true:'ChoosedCuiItem'}[chooseCuiItem.indexOf(item.id) > -1]">
            <div class="cuisine-item-top">
              <!-- <AliImage :keys="item.tp" style="border-radius: 6px 6px 0 0;"></AliImage> -->
              <img class="item-pic" v-lazy="imgUrl + item.tp" style="height: 200px;width: 260px;border-radius: 6px 6px 0 0;"/> 
              <div class="trade-name">品名：{{item.mc}}</div>
            </div>
            <div class="cuisine-item-bottom">
              <!-- <div class="type-price">
                <span class="type">菜品类别：{{item.cplb.mc}}</span>
                <span class="price">¥{{item.jg}}</span>
              </div> -->
              <div class="introduce" v-if="item.bz">简介:{{item.bz}}</div>
              <div class="switch-div" style="margin-top: 10px;">
                 <span class="price" style="color:red;float: left;">¥{{item.jg}}</span>
                <span>是否可预订</span>
                  <el-switch
                    v-model="item.sfkyd"
                    active-color="#8ba8fe"
                    inactive-color="#a5a5a5"
                    @click.native.stop="handelUpdate(item.id,item.sfkyd)"
                  ></el-switch>
              </div>
            </div>
          </div>
        </waterfall-slot>
        <!-- <waterfall-slot class="cuisine-box">
                        <div class="cuisine-item">
                            <a href="#" class="cptj"><img src="../../assets/img/cptj.png" width="100%" height="100%"></a>
                        </div>
        </waterfall-slot>-->
      </waterfall>


    </div>
   
    <!--section2-->
    <div class="section section3 clearfix" v-if="menuIndex===1">
        <div class="content xfjl">
              <div class="screen-search">
        <div class="screen">
          <span>筛选</span>
          <ul class="screen-ul" style="font-family:'微软雅黑';">
            <!-- <li :class="{true:'active'}[searchIndex===-1]">
              <a href="javascript:void(0)">全部</a>
            </li> -->
            <li
                v-for="(cuisineLb,index) in searchList"
                :key="index"
                :class="{true:'active'}[searchIndex===index]"
                @click="searchDd(index)"
            >
              <a href="javascript:void(0)">{{cuisineLb}}</a>
            </li>
          </ul>
        </div>
        <div class="search-group">
            <span class="search-group-addon" @click="searchInfo(input,searchIndex)">
            <img src="../../assets/img/search.png">
            </span>
            <input type="text" placeholder="搜索" id="search" v-model="input">
            <!-- <el-input id="search" placeholder="请输入内容" v-model="input" clearable></el-input> -->
        </div>
      </div>
            <div class="table-box" style="max-height: 700px;overflow-y: scroll;">
            <el-table
            ref="multipleTable"
            :data="orderList"
            tooltip-effect="dark"
            style="width:100%;"
            stripe
            @selection-change="handleSelectionChange">
                <el-table-column
                    type="selection"
                    width="55">
                </el-table-column>
                <el-table-column
                    prop="ddbh"
                    label="订单号"
                    width="120"
                    show-overflow-tooltip>
                </el-table-column>
                    <el-table-column
                    prop="dcrxm"
                    label="消费用户"
                    width="120">
                </el-table-column>
                <el-table-column
                    prop="dcrhm"
                    label="手机号码"
                    show-overflow-tooltip>
                </el-table-column>
                 <el-table-column
                    prop='ycsj'
                    label="用餐时间"
                    show-overflow-tooltip>
                </el-table-column>
                  <el-table-column
                    prop='ycrs'
                    label="用餐人数"
                    show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                    prop='mc'
                    label="场地名称"
                    show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                    prop='ydsj'
                    label="预订时间"
                    show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                    prop='iszt'
                    label="订单状态"
                    show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                    prop='bz'
                    label="订单备注"
                    show-overflow-tooltip>
                </el-table-column>
                 <el-table-column
                    fixed="right"
                    label="订单详情"
                    width="100" 
                    :key='orderList' 
                     >
                    <template slot-scope="scope">
                        <el-button @click="detailById(scope.row.id)" type="text" size="small">查看</el-button>
                    </template>
                </el-table-column>
                <el-table-column
                    fixed="right"
                    label="操作"
                    width="100" 
                    :key='orderList' 
                     >
                    <template slot-scope="scope">
                        <el-button @click="cancelPage(scope.row.id)" type="text" size="small" v-if=" scope.row.iszt!='个人已取消' && scope.row.iszt!='已取消' && scope.row.iszt!='已完单'">取消预订</el-button>
                    </template>
                </el-table-column>
              
            </el-table>
            </div>
            <div class="bottom-ope clearfix">
                <div class="left-btn">
                    <!-- <input type="checkbox" class="allCheckbox">
                    <span>全选</span> -->
                    <button class="btn btn-export" @click="toExcel()">导出</button>
                    <!-- <button class="btn btn-sc" @click="cancel()">取消预订</button> -->

                </div>
                <ul
                class="paging"
                style="position: absolute;right: 20px;top: 50%;transform: translateY(-14px);"
                >
                <el-pagination
                @size-change="handleOrderSizeChange"
                @current-change="handleOrderCurrentChange"
                :current-page.sync="currentOrderPage"
                background
                :page-size="orderRows"
                :page-sizes="[10, 15, 20, 25]"
                layout="sizes,total,prev, pager, next, jumper"
                :total="orderTotal"
                ></el-pagination>
                </ul>
            </div>
        </div>
    </div>
    <!--提示信息框 添加菜品start-->
    <div class="modal" id="modal" :class="{true:'modal-in'}[showModel]"  style="width:30%;">
      <div class="modal-title">
        <div class="title">添加菜品</div>
        <a href="javascript:void(0);" class="close" @click="modalClose()">
          <img src="../../assets/img/close.png">
        </a>
      </div>
      <div class="modal-content">
        <el-form
          ref="form"
          label-width="80px"
          :model="form"
          :hide-required-asterisk="true"
          :rules="rules"
        >
          <el-upload
            class="avatar-uploader"
            :action="attachImg"
            :on-success="handleSuccess"
            name="myfiles"
            list-type="picture-card"
            :multiple="false"
            :before-upload="beforeUpload"
            :show-file-list="false"
          >
            <img
              v-if="dialogImageUrl"
              :src="dialogImageUrl"
              class="avatar"
              style="max-width: 144px;"
            >
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>

          <el-form-item label="菜品名称" :required="true" prop="mc">
            <el-input v-model="form.mc"></el-input>
          </el-form-item>

          <el-form-item label="菜品价格" :required="true" prop="jg">
            <el-input v-model="form.jg"></el-input>
          </el-form-item>

        <el-form-item label="菜品类别" >
            <el-input placeholder="请输入添加菜品类别名称" v-model="cpType" clearable class="input-with-select">
                <el-button slot="append" icon="el-icon-check" @click="saveCpType(cpType)"></el-button>
            </el-input>
        </el-form-item>

          <el-form-item label="菜品类别" prop="cplb">
            <el-select placeholder="请选择类别" v-model="form.cplb">
              <el-option
                v-for="item in cuisineLbList"
                :key="item.mc"
                :label="item.mc"
                :value="item.id"
                style="padding-left: 10px;"
              ></el-option>
            </el-select>
            <el-tooltip class="item" effect="dark" content="删除此类别" placement="top"  v-if="form.cplb">
                <el-button type="danger" icon="el-icon-delete" circle size="mini" v-if="form.cplb" @click='deleteType(form.cplb)'></el-button>
            </el-tooltip>
          </el-form-item>

          <el-form-item label="菜品简介">
            <el-input type="textarea" v-model="form.bz"></el-input>
          </el-form-item>

          <el-form-item>
                <el-button type="primary" class="btn btn-makeSure" @click="save(form)">确定</el-button>
          </el-form-item>
          <!-- <button class="btn btn-makeSure" @click="save(form)">确定</button> -->
        </el-form>
      </div>
    </div>
    <div class="modal-backdrop" :class="{true:'modal-in modal-backdrop-active'}[showModel]"></div>
    <!--提示信息框 添加菜品end-->

    <!--提示信息框 添加菜品start-->
    <div class="modal" id="modal" :class="{true:'modal-in'}[showAddModel]">
      <div class="modal-title">
        <div class="title">导入菜品</div>
        <a href="javascript:void(0);" class="close" @click="modalClose()">
          <img src="../../assets/img/close.png">
        </a>
      </div>
      <div class="modal-content" style="width: 400px;min-height:125px;">
        <el-upload v-if='active==0'
        class="upload-demo"
        :multiple="true"
        action="${pageContext.request.contextPath}/lookup/editEvidence/123"
        :auto-upload="false"
        :http-request="uploadFile"
        ref="upload"
        
        >
            <el-button size="small" type="primary" style="height: 33px; width: 90px;margin-bottom: 14px;">选择图片</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件</div>
            <!-- <el-button style="margin-left: 10px;" size="small" type="success" @click="subPicForm">上传到服务器</el-button> -->
        </el-upload>

        <el-upload v-if='active==1'
        class="upload-demo"
        :multiple="false"
        action="${pageContext.request.contextPath}/lookup/editEvidence/123"
     
        :auto-upload="false"
        :http-request="uploadExcel"
        ref="upload2"
        >
            <el-button size="small" type="primary" style="height: 33px; width: 90px;margin-bottom: 14px;">选择文件</el-button>
            <!-- <el-button style="margin-left: 10px;" size="small" type="success" @click="subPicExcel">上传到服务器</el-button> -->
        </el-upload>
        <div @click='download()' v-if='active==1' style="cursor: pointer;">下载模板</div>

         <el-button style="margin-top: 40px;height: 45px;width: 90px;" @click="subPicForm" v-if='active===0'>下一步</el-button>
        <el-button style="margin-top: 40px;height: 45px;width: 90px;" @click="subPicExcel" v-if='active===1'>下一步</el-button>
          <!-- <button class="btn btn-makeSure" @click="save(form)">确定</button> -->

      </div>
    </div>
    <div class="modal-backdrop" :class="{true:'modal-in modal-backdrop-active'}[showAddModel]"></div>
    <!--提示信息框 添加菜品end-->

    <div class="modal" id="modal" :class="{true:'modal-in'}[showDetailModel]"  style="width:100%;">
      <div class="modal-title">
        <div class="title">订单详情</div>
        <a href="javascript:void(0);" class="close" @click="modalClose()">
          <img src="../../assets/img/close.png">
        </a>
      </div>
      <div class="modal-content" style="min-height:125px;">
          <div class="invoice" v-if='goodDetail!=null'>
            <div class="ddbh" style="border-bottom: 1px solid #77a6fe;width: 100%;display: block;text-align: left;padding-bottom: 10px;">
                  <span>发票详情 </span>
            </div>
            <div class="form" style="margin-bottom">
                <el-form label-position="left" inline class="demo-table-expand" :model="goodDetail" v-if='goodDetail!=null'>
                    <el-form-item label="发票名字" style="text-align: left;">
                    <span>{{ goodDetail.name }}</span>
                    </el-form-item>
                    <el-form-item label="发票抬头"  style="text-align: left;">
                    <span>{{ goodDetail.invoiceTitle }}</span>
                    </el-form-item>
                    <el-form-item label="发票种类"  style="text-align: left;">
                    <span>{{ goodDetail.invoiceType}}</span>
                    </el-form-item>
                    <el-form-item label="发票号"  style="text-align: left;" v-if='goodDetail.taxIdNum'>
                    <span>{{goodDetail.taxIdNum}}</span>
                    </el-form-item>
                    <el-form-item label="联系电话"  style="text-align: left;">
                    <span>{{goodDetail.phone}}</span>
                    </el-form-item>
                </el-form>
            </div>
           
          </div>
      </div>
    
    <!--提示信息框 订单详情start-->
    <div class="modal" id="modal" :class="{true:'modal-in'}[showDetailModel]"  style="width:100%;">
      <div class="modal-title">
        <div class="title">订单详情</div>
        <a href="javascript:void(0);" class="close" @click="modalClose()">
          <img src="../../assets/img/close.png">
        </a>
      </div>
      <div class="modal-content" style="min-height:125px;">
          <div class="invoice" v-if='goodDetail!=null'>
            <div class="ddbh" style="border-bottom: 1px solid #77a6fe;width: 100%;display: block;text-align: left;padding-bottom: 10px;">
                  <span>发票详情 </span>
            </div>
            <div class="form" style="margin-bottom">
                <el-form label-position="left" inline class="demo-table-expand" :model="goodDetail" v-if='goodDetail!=null'>
                    <el-form-item label="发票名字" style="text-align: left;">
                    <span>{{ goodDetail.name }}</span>
                    </el-form-item>
                    <el-form-item label="发票抬头"  style="text-align: left;">
                    <span>{{ goodDetail.invoiceTitle }}</span>
                    </el-form-item>
                    <el-form-item label="发票种类"  style="text-align: left;">
                    <span>{{ goodDetail.invoiceType}}</span>
                    </el-form-item>
                    <el-form-item label="发票号"  style="text-align: left;" v-if='goodDetail.taxIdNum'>
                    <span>{{goodDetail.taxIdNum}}</span>
                    </el-form-item>
                    <el-form-item label="联系电话"  style="text-align: left;">
                    <span>{{goodDetail.phone}}</span>
                    </el-form-item>
                </el-form>
            </div>
           
          </div>
          <div class="orderDetail">
              <div class="ddbh" style="border-bottom: 1px solid #77a6fe;width: 100%;display: block;text-align: left;padding-bottom: 10px;">
                  <span>商品详情 </span>
              </div>
              <div>
                <el-table
                    :data="goodDetailList"
                    style="width: 100%">
                    <el-table-column
                        prop="goodsId.name"
                        label="商品名称"
                        width="180">
                    </el-table-column>
                    <el-table-column
                        prop="goodsId.price"
                        label="单价"
                        width="180">
                    </el-table-column>
                    <el-table-column 
                        prop="count"
                        label="数量">
                    </el-table-column>
                    <el-table-column
                        prop="zje"
                        label="共计">
                    </el-table-column>
                    </el-table>
              </div>
          </div>

      </div>
    </div>
    <div class="modal-backdrop" :class="{true:'modal-in modal-backdrop-active'}[showDetailModel]"></div>
    <!--提示信息框 订单详情end-->

  </div>

 <div class="modal" id="modal" :class="{true:'modal-in'}[showModel2]"  style="width:35%;height:40%;overflow-y:scroll;">
          <div class="modal-title">
                <div class="title">查看详情</div>
                <a href="javascript:void(0);" class="close" @click="modalClose2()"><img src="../../assets/img/close.png"></a>
          </div>
         
         <!-- <div v-if="sbList!=null" style="width:50%;position:relative;left:0%;margin-top:5%;margin-bottom:2%">
            <span>硬件设备:
              <span v-for="sb in sbList">{{sb}}、</span>
            </span>
         </div> -->
         
         <div v-if="sbList!=null" style="margin-top:2%; margin-bottom:1%; margin-right:30%; width:100%; position:relative;">
            硬件设备:
              <div>
              <span v-for="sb in sbList">{{sb}}、</span>
            </div>
         </div>
          <div style="width:100%;border-bottom:1px solid #77a6fe;" v-if="sbList!=null"></div>
          <div style="width:100%;position:absolute;" v-if="detailList!=null">
            <div class="name" style="position:relative;left:-35%;margin-top:3%">会务套餐 
              <div class="price" style="position:relative;left:60%;margin-top:-2.5%">共：<span style="color:red">￥{{totalPrice}}</span></div>
            </div>
          </div>
          <div v-if="detailList!=null" v-for="detail in detailList" style="width:100%;position:relative;right:25%;">
            <div style="margin-top:5%;">
            <div class="img" style="padding-top:5%">
              <img v-if="detail.te.tp" ion-Image src="../../assets/img/cuisine1.png" type="stcp" sys="xydc" width="30%" height="30%" />
            </div>
            <div style="margin-top:-18%;margin-left:50%">
              <div class="cpname" >{{detail.te.mc}}</div>
              <div class="fs" >共: {{detail.fs}} 份</div>
              <div>单价：{{detail.te.jg}}元/份</div>
            </div>
          </div>
          </div>
      </div>
      <!--select3 -->
       <div class="section section3 clearfix" v-if="menuIndex===2">
      <div class="search-group" >
            <span class="search-group-addon" @click="searchCp(input)">
            <img src="../../assets/img/search.png">
            </span>
            <input type="text" placeholder="操作人" id="search" v-model="input">
            <!-- <el-input id="search" placeholder="请输入内容" v-model="input" clearable></el-input> -->
        </div>
        <div class="table-box" style="max-height: 700px;overflow-y: scroll;width:100%;">
            <el-table
            ref="multipleTable"
            :data="logList"
            tooltip-effect="dark"
            style="width:100%;"
            stripe
            @selection-change="handleSelectionChange">
      <el-table-column
      type="index"
      label="序号"
      width="180">
    </el-table-column>
    <!-- <el-table-column
      prop="cjr"
      label="创建人id"
      width="180">
    </el-table-column> -->
    <el-table-column
      prop="cjsj"
      label="创建时间"
      width="180">
    </el-table-column>
    <el-table-column
      prop="gxsj"
      label="更新时间">
    </el-table-column>
     <!-- <el-table-column
      prop="userid"
      label="用户id">
    </el-table-column> -->
     <el-table-column
      prop="username"
      label="操作人">
    </el-table-column>
    <el-table-column
      prop="refectoryEntity.mc"
      label="所属餐厅">
    </el-table-column>
    <el-table-column
      prop="operate"
      label="操作">
    </el-table-column>
  </el-table>
     </div>
        <ul
                class="paging"
                style="position: absolute;right: 50px;top: 120%;transform: translateY(-14px);"
                >
                <el-pagination
                @size-change="handleLogSizeChange"
                @current-change="handleLogCurrentChange"
                :current-page.sync="currentOrderPage"
                background
                :page-size="orderRows"
                :page-sizes="[10, 15, 20, 25]"
                layout="sizes,total,prev, pager, next, jumper"
                :total="orderTotal"
                ></el-pagination>
                </ul>
    </div>
  </div>
</template>

<script src="./template.js"></script>
<script>
import auth from "../../api/auth";
import hwtc from "../../api/hwtc";
import { mapGetters, mapActions } from "vuex";
import Waterfall from "vue-waterfall/lib/waterfall";
import WaterfallSlot from "vue-waterfall/lib/waterfall-slot";
import AliImage from "../../components/Image";
import {
  setLocalStorage,
  isQuotaExceeded,
  getLocalStorage
} from "../../helpers/locTime";
import axios from "axios";
import Date from "../../components/date.vue";
import querystring from 'querystring'

export default {
  name: "Hwtc",
  props: ["currentHwTreenode"],
  components: {
    Waterfall,
    WaterfallSlot,
    AliImage,
    Date
  },
  data() {
    return {
        menuName: ["菜品管理", "订单管理"],
        cpType:null,
        cuisineList: [],
        cuisineLbList: [],
        sfkyd: true,
        allChecked:false,
        currentPage: 1,
        rows: 10,
        menuIndex: 0,
        cplbIndex: -1,
        searchList:['消费用户','用餐时间','场地名称'],
        searchIndex:0,
        cyList:[],
        ids:[],
        newId:"",
        orderId:'',
        totalPrice:0,
        shopList: this.$parent.hwList,
        form: {
            mc: "",
            cplb: "",
            bz: "",
            sfkyd: true,
            jg: "",
            refe:this.currentHwTreenode,
            tp: ""
        },
        Treenode: this.currentHwTreenode,
        dialogImageUrl: "",
        cuisineLb: "",
        input: "",
        total: null,
         totalLog:null,
            rows: 10,
            currentPage: 1,
            orderList:[],
            logList:[],
            roomIndex:-1,
            roomC:{},//选择房间的索引,
            checkList:[],
             imgList:[],
        loading: false,
        showModel: false,
        showModel2: false,
        showAddModel:false,
         multipleTablep:{},
        attachImg:axios.defaults.baseURL + "xydc/app/hwtc/filesUpload?_token=" + getLocalStorage("token"),
        rules: {
            mc: [
            { required: true, message: "请输入菜品名称", trigger: "blur" },
            { min: 2, max: 7, message: "长度在 2 到 7 个字符", trigger: "blur" }
            ],
            jg: [{ required: true, message: "请输入菜品价格", trigger: "blur" }],
            cplb: [{ required: true, message: "请选择菜品类别", trigger: "change" }]
        },
        rules2: {
            mc: [
                { required: true, message: "请输入包厢名称", trigger: "blur" },
                { min: 2, max: 7, message: "长度在 2 到 7 个字符", trigger: "blur" }
            ],rnrs: [{ required: true, message: "请选择容纳人数", trigger: "blur" }],
        },// 
        chooseCuiItem:[],
        isLoad : [],
        imgUrl:axios.defaults.baseURL + 'xydc/upload/',
        //以上是第一模块data
        currentOrderPage: 1,
        orderRows:10,
        orderList:[],
        multipleSelection:[],
        orderTotal:null,
        detailList:[],
        sbList:[]
    };
  },
  created() {
    // this.form.refe = this.treeNode
    this.onGetHwList();
    this.gettableDate();
    console.log(this.Treenode,this.form.refe);
  },
  methods: {
    ...mapActions(["getGrxx", "login"]),
    imageLoaded(index){
        console.log('图片已加载',index)
        // this.isLoad = true
    },
      gettableDate(){
                this.loading=true
                hwtc.selectLogs(this.currentOrderPage,this.orderRows,this.username,this.hotelMc).then(res=>{
                     if(res.success){
                    this.loading = false
                      this.logList=res.data.pageList
                       this.totalLog=res.data.total
                    }
                })
            },

            //日志管理请求数据接口
             handleSizeChange(val) {
                this.rows = val;
                this.getOrderList();
                 this.gettableDate()

            },//分页插件 size变化
             handleCurrentChange(val) {
                this.getOrderList();
                 this.gettableDate()
            },//分页插件

             handleLogSizeChange(val) {
               
                this.orderRows = val;
                this.gettableDate()
            },//分页插件 size变化
            handleLogCurrentChange(val) {
                this.gettableDate()
            },//分页插件
             handleSelectionChange(val) {
            this.multipleSelection = val;
              for(var item in this.multipleSelection){
                console.log(this.multipleSelection[item].id)
             }
              
             },
                searchCp(val) {
      if (!val) {
        this.$message.error("输入内容不可为空");
      } else {
       hwtc.selectLogs(1,10,val).then(res=>{
                    if(res.success){
                       console.log(res.data.pageList)
                       this.logList=res.data.pageList
                        this.totalLog=res.data.total
                        
                    }
                })
      }// 查询请求入口
             },

             handleSizeChange(val) {
      this.rows = val;
      console.log(this.rows)
      this.onGetList();
      this.gettableDate()
    },//分页插件 size变化

    handleCurrentChange(val) {
      this.onGetList();
       this.gettableDate()
       this.gettableDate()
    },//分页插件
    deleteCp(){
        if(this.chooseCuiItem.length ===0 ){
            this.$message({
                    type: 'warning',
                    message: '没有选中任何菜品'
            });
        }else{
            this.$confirm('此操作将删除所选文件, 是否确认?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                hwtc.delete(this.chooseCuiItem).then(res=>{
                    console.log(res)
                    if(res.success){
                        this.searchAll()
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                    }
                    
                })
            }).catch(() => {
                this.$message({
                type: 'info',
                message: '已取消删除'
                });          
            });
        }
    },//删除菜品

    handleChooseCuiItem(index,id){
        if(this.chooseCuiItem.indexOf(id) === -1){
            this.chooseCuiItem.push(id)
        }else{
            this.chooseCuiItem.splice(this.chooseCuiItem.indexOf(id),1)
        }
    },//选择菜品

    handelUpdate(id,sfkyd){
        console.log(id,sfkyd)
        let type = null
        if(sfkyd){
            type = 1
        }else{
            type = 0
        }
        hwtc.isOrderUpdate(id,type).then(res=>{
            console.log(res)
            if(res.success){
                this.$message({
                    type: 'success',
                    message: '更改成功!'
                });
            }else{
                this.$message({
                    type: 'info',
                    message: '更改失败!'
                });   
            }
        })
    },//更改是否预订状态
     searchDd(index){
      this.searchIndex=index;
    },
     searchInfo(input){
      console.log(input)
      console.log(this.searchIndex)
        hwtc.findOrder(this.currentHwTreenode,this.currentOrderPage,this.orderRows,input,this.searchIndex).then(res=>{
            console.log(res)
            console.log(res.data.hwydxxList)
            this.orderTotal = res.data.total
            console.log(this.orderTotal);
            console.log(this.currentHwTreenode);
            res.data.hwydxxList.forEach((item,index)=>{
                switch(item.iszt){
                    case 'YJZ':
                        item.iszt = '已记账'
                        break;
                    case 'YYD':
                        item.iszt = '已预订'
                        break;
                    case 'DZF':
                        item.iszt = "待支付"
                        break;
                    case 'YPJ':
                        item.iszt = '已评价'
                        break;
                    case 'YWD':
                        item.iszt = '已完单'
                        break;
                    case 'YQX':
                        item.iszt = '已取消'
                        break;
                    case 'GRYQX':
                        item.iszt = '个人已取消'
                        break;
                }
            })
            this.orderList = res.data.hwydxxList
            console.log(this.orderList)

        })
    },
    toExcel(){
        for(var key in this.multipleSelection){
          console.log(typeof(this.multipleSelection[key].id))
            this.ids.push(this.multipleSelection[key].id)
             this.newId=this.ids.join("000")
        }
        var id = this.newId
        var treeNode=this.currentHwTreenode
           hwtc.excel(treeNode,id).then(res=>{
                    console.log(res.data.path)
                    if(res.success){
                        this.$message({
                            type: 'success',
                            message: '导出成功!'
                        });
                        window.open(res.data.path)
                    }else{
                        this.$message.error('导出失败!')
                    }
                }).catch(()=>{
                    this.$message.error('导出失败!')
                })
      
    },//导出订单
       cancelPage(id){
         console.log(id)
                 this.$confirm('是否取消预订?', '警告', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    console.log(id)
                    hwtc.cancel(id).then(res=>{
                        console.log(res)
                        console.log(id)
                         if(res.success){
                            this.$message({
                                type: 'success',
                                message: '取消成功!'
                            });
                            this.findOrder();
                        }else{
                            this.$message.error('出现问题,请重新操作!')
                        }
                    }).catch(()=>{
                        this.$message.error('出现问题,请重新操作!')
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消操作'
                    });          
                });
            },//取消预订

    handleSizeChange(val) {
      this.rows = val;
      console.log(this.rows)
      this.onGetHwList();
    },//分页插件 size变化

    handleCurrentChange(val) {
      this.onGetHwList();
    },//分页插件

    handleSuccess(res, file) {
      console.log(res, file);
      this.dialogImageUrl = axios.defaults.baseURL + "xydc/upload/" + res.data.list.replace(',','');
      this.form.tp = res.data.list;
    },//图片上传成功回调

    beforeUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isPNG = file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG && !isPNG) {
        this.$message.error("上传头像图片只能是 JPG/PNG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return (isJPG || isPNG) && isLt2M;
    },//图片格式检测函数

    save(form) {
        console.log(this.form.refe)
        this.$refs.form.validate(valid => {
            if (valid) {
            hwtc.save(this.form).then(res => {
                console.log(res);
                if (res.success) {
                this.$message.success("添加成功!");
                this.searchAll();
                this.showModel = false;
                }
            });
            } else {
            console.log("error submit!!");
            return false;
            }
        });
    },//保存菜品

    addCp() {
      this.showModel = true;
    },//添加菜品按钮

    modalClose() {
      this.showModel = false;
      this.showAddModel = false
    },//关闭菜品model

    changeType(index) {
      this.menuIndex = index;
      console.log(index)
      if(index==2){
          this.findOrder()//第三模块执行
           this.gettableDate()
          console.log(this.orderList);
      }
    },//class动态变化

    onGetHwList(treeNode = this.currentHwTreenode,mc = null) {
      this.loading = true;
         console.log(this.currentHwTreenode);
      hwtc.getList(this.currentPage, this.rows, treeNode, mc).then(res => {
           //菜品list
          this.cuisineList = [];
          setTimeout(()=>{
            this.cuisineList = res.data.cpList;
            console.log(this.cuisineList)
          },300) //图片不刷新的暂时解决办法 哎...

          if (this.currentPage === 1) {
             this.cuisineLbList = res.data.lbList; //分类
           }
          this.total = res.data.total; //总数
          this.loading = false; //载入动画

          //this.$forceUpdate()//强制刷新

          console.log(this.cuisineList)
        });
         hwtc.findOrder(treeNode,this.currentOrderPage,this.orderRows).then(res=>{
            console.log(res)
            console.log(res.data.hwydxxList)
            this.orderTotal = res.data.total
            console.log(this.orderTotal);
            console.log(this.currentHwTreenode);
            res.data.hwydxxList.forEach((item,index)=>{
                switch(item.iszt){
                    case 'YJZ':
                        item.iszt = '已记账'
                        break;
                    case 'YYD':
                        item.iszt = '已预订'
                        break;
                    case 'DZF':
                        item.iszt = "待支付"
                        break;
                    case 'YPJ':
                        item.iszt = '已评价'
                        break;
                    case 'YWD':
                        item.iszt = '已完单'
                        break;
                    case 'YQX':
                        item.iszt = '已取消'
                        break;
                    case 'GRYQX':
                        item.iszt = '个人已取消'
                        break;
                }
            })
            this.orderList = res.data.hwydxxList
            console.log(this.orderList)

        })
         hwtc.getBalcony(treeNode,this.ycrq).then(res=>{
            this.loading = false
            console.log(res)
            for(let i=0 ;i <  res.data.list.length;i++){
                if(i!= 0){
                   if( res.data.list[i].id == (res.data.list[i-1].id)){
                        res.data.list[i-1].ycsj =  res.data.list[i-1].ycsj+ ','+ res.data.list[i].ycsj
                        res.data.list[i-1].jlid =   res.data.list[i-1].jlid + ',' + res.data.list[i].jlid
                        res.data.list.splice(i,1)
                    }
                }
            }

            for(let i=0 ;i <  res.data.list.length;i++){
                if( res.data.list[i].ycsj==='中餐'){
                    res.data.list[i].ycsj= '中餐,空'
                    res.data.list[i].jlid = res.data.list[i].jlid + ',' +'null'
                }else if(res.data.list[i].ycsj==='晚餐'){
                    res.data.list[i].ycsj= '空,晚餐'
                    res.data.list[i].jlid ='null' +',' + res.data.list[i].jlid 
                }else if (res.data.list[i].ycsj==='null'){
                    res.data.list[i].ycsj= '空,空'
                    res.data.list[i].jlid ='null' +',' + 'null'
                }
            }
            console.log(res.data.list)
            this.BalconyList = res.data.list
        })
    },//获取首页的菜品全部信息
  
    searchLb(index) {
      this.loading = true;
      //存在每次查完仍然有菜品类别 所以要重新写hwtc.getList
      hwtc
        .getList(this.currentPage, this.rows, this.currentHwTreenode)
        .then(res => {
          this.cuisineList = res.data.cpList; //菜品list
          this.total = res.data.total;
          this.loading = false;
        });
      this.cplbIndex = index;
    },//搜索类别

    searchCp(val) {
      if (!val) {
        this.$message.error("输入内容不可为空");
      } else {
        this.onGetHwList(this.currentHwTreenode, null, val);
      }
    },//搜索菜品

    searchAll() {
      this.loading = true;
      this.cplbIndex = -1;
      this.onGetHwList();
    //this.$forceUpdate()//强制刷新
    },//搜索全部

    findOrder(){
        hwtc.findOrder(this.currentHwTreenode,this.currentOrderPage,this.orderRows).then(res=>{
            console.log(res)
            this.orderTotal = res.data.total
            res.data.hwydxxList.forEach((item,index)=>{
                switch(item.iszt){
                    case 'YJZ':
                        item.iszt = '已记账'
                        break;
                    case 'YYD':
                        item.iszt = '已预订'
                        break;
                    case 'DZF':
                        item.iszt = "待支付"
                        break;
                    case 'YPJ':
                        item.iszt = '已评价'
                        break;
                    case 'YWD':
                        item.iszt = '已完单'
                        break;
                    case 'YQX':
                        item.iszt = '已取消'
                        break;
                    case 'GRYQX':
                        item.iszt = '个人已取消'
                        break;
                }
            })
            this.orderList = res.data.hwydxxList
            console.log(this.orderList)

        })
    },
     detailById(id){
        this.showModel2=true
        hwtc.detail(id).then(res=>{
          if(res.success){
            this.detailList=res.data.list
            this.sbList=res.data.sblist
            this.totalPrice=0;
            res.data.list.forEach((item,index)=>{
                
                this.totalPrice=parseFloat(parseFloat(this.totalPrice)+parseFloat(item.te.jg)*parseFloat(item.fs))
                
                console.log(this.totalPrice)
             })
            
           }
        })
    },

    modalClose2(){
       this.showModel2=false
    },
    handleOrderSizeChange(val){
        this.orderRows = val;
        this.findOrder();
         this.gettableDate()
        console.log(this.orderRows)
    },
    handleOrderCurrentChange(){
        this.findOrder();
         this.gettableDate()
    },
    handleSelectionChange(val) {
         this.multipleSelection = val;
         for(var item in this.multipleSelection){
              console.log(this.multipleSelection[item].id)
         }
    }

  },
  computed: {},
  watch:{ //可以使用字符串 对 data中的对象属性进行监听
      cuisineLbList : ()=>{
           this.gettableDate()
        // console.log('cuisineLbList数据发生变化')
      },
      allChecked:{
            handler(newVal){
                if(newVal){
                    this.cuisineList.forEach(item=>{
                        this.chooseCuiItem.push(item.id)
                    })
                }else{
                    this.chooseCuiItem=[]
                }
            },   
            deep: true
        }//深度监听allChecked 即可访问data的值

  }
};
</script>



<style scoped lang="less" src="./template.less"></style>
<style lang="less" scoped>

</style>
